import React, { Component } from 'react'

import './02-style.css'

export default class App extends Component {

  // 类组件中定义状态的方法 ----------------- vue 中的 data
  // state 是固定写法，在其内部可以定义一些初始数据
  state = {
    flag: true
  }

  render() {
    return (
      <div className={this.state.flag ? 'active' : 'box'} onClick={()=>{
        console.log(this);
        // 在 react 中无法直接修改值，因为 react 有专门修改数据的方法
        // 类似于 vuex 只能通过一个方法来进行改变
        // this.state.flag = !this.state.flag

        // setState 是 react 中唯一修改数据的方法，微信小程序也是只能有一个修改数据的方法
        // 取反 this.state.flag 然后将取反之后的值设置在 flag 中
        this.setState({
          flag: !this.state.flag
        })

      }}>App</div>
    )
  }
}
